<template>
  <div class="RegisterContainer">
    <Header :title="'注册页'"></Header>
    <div class="imgbox">
      <van-image
        width="200"
        height="100"
        margin-left="100"
        src="//yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
      />
    </div>
    <van-form ref="form">
      <van-field
        type="text"
        v-model="phone"
        name="手机号"
        label="手机号"
        placeholder="请输入您的手机号"
        :rules="telRules"
      />
      <van-field
        v-model="code"
        center
        clearable
        name="短信验证码"
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="codeRules"
      >
        <!-- 通过 button 插槽可以在输入框尾部插入按钮 -->
        <template #button>
          <!-- 这里有bug，使用<van-button>无法进行局部表单验证 -->
          <!-- <van-button size="small" type="primary" @click="getCode">获取验证码</van-button> -->
          <div class="button" @click="getCode">获取验证码</div>
        </template>
      </van-field>
      <van-field
        v-model="password"
        type="text"
        name="密码"
        label="登录密码"
        placeholder="请输入登录密码"
        :rules="passwordRules"
      />
      <van-field
        v-model="rePassword"
        type="text"
        name="密码"
        label="确认密码"
        placeholder="请确认密码"
        :rules="rePasswordRules"
      />
    </van-form>
    <div class="controls">
      <input name="m1" v-model="isAgree" type="checkbox" />
      <span class="controlsMain">
        我同意
        <span class="controlsText">《服务条款》</span>
        和<span class="controlsText"> 《网易隐私政策》</span></span
      >
      <span class="error-msg"></span>
    </div>
    <div style="margin: 16px" @click="submit">
      <van-button round block type="danger" native-type="submit"
        >完成注册</van-button
      >
    </div>
  </div>
</template>

<script>
import { reqCode, reqRegister } from '@/api/login';
import { Dialog } from 'vant';
export default {
  name: 'Register',
  data() {
    return {
      phone: '', //手机号
      code: '', //验证码
      password: '', //密码
      rePassword: '', //确认密码
      isAgree: false,
      telRules: [
        {
          required: true,
          message: '手机号码不能为空',
          trigger: 'onBlur',
        },
        {
          // 自定义校验规则
          validator: value => {
            return /^1[3-9]\d{9}$/.test(value);
          },
          message: '请输入正确格式的手机号码',
          trigger: 'onBlur',
        },
      ],
      codeRules: [
        {
          required: true,
          message: '验证码不能为空',
          trigger: 'onBlur',
        },
      ],
      passwordRules: [
        {
          // 自定义校验规则  验证密码
          validator: value => {
            return /^[a-zA-Z0-9_]{6,18}$/.test(value);
          },
          message: '请输入正确的密码格式',
          trigger: 'onBlur',
        },
      ],
      rePasswordRules: [
        {
          // 自定义校验规则  验证密码是否一致
          validator: val => {
            // console.log(this.password);
            return val === this.password;
          },
          message: '两次密码输入的不一致,请重新输入',
          trigger: 'onBlur',
        },
      ],
    };
  },
  methods: {
    //点击去主页
    toHome() {
      this.$router.push('/home');
    },
    //点击去搜索页
    toSearch() {
      this.$router.push('/search');
    },
    //点击去购物车
    toCart() {
      this.$router.push('/cart');
    },
    //点击发起验证，获取手机验证码
    async getCode(event) {
      // console.log(event);
      const result = await reqCode(this.phone);
      if (result.code === 200) {
        console.log(event.target);
        // console.log(result);
        // 填充到对应的验证输入框即可
        // event.target.value = result.data
        this.code = result.data;
      } else {
        console.log(result.message);
      }
    },
    async submit() {
      if (!this.isAgree) {
        Dialog({ message: '请确认已同意服务条款及相关政策' });
      } else {
        // console.log(phone,p);
        const result = await reqRegister({
          phone: this.phone,
          password: this.password,
          code: this.code,
        });
        if (result.code === 200) {
          // 注册成功则要跳转到login页面
          this.$router.push('/login');
        } else {
          console.log(result.message);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.RegisterContainer {
  .imgbox {
    width: 375px;
    height: 100px;
    padding: 50px 50px;
    margin-left: 40px;
    margin-top: 46px;
  }
  .controls {
    width: 375px;
    display: flex;
    .controlsMain {
      font-size: 16px;
      .controlsText {
        color: #007aff;
      }
    }
  }
}
</style>
